<template>
  <div class="phoneVideo" >
    <el-image class="video_image" :src="props.materialsInfo[0].videoUrl" alt="" fit="cover">
      <template #error>
        <el-image class="video_image_default" src="/static/file/mov.png" alt="" fit="cover"></el-image>
      </template>
    </el-image>
    <el-image class="video_play" src="/static/play.png" alt="" fit="cover" @click="playVideoFun"></el-image>
    <el-icon class="del" @click="del"><delete /></el-icon>
  </div>
</template>

<script setup lang='ts'>
import {reactive, ref, computed, watch, onMounted, defineProps} from "vue"
import {useRouter, useRoute} from "vue-router"
import emitter from '@/view/content/basematerial/video/common/js/mitt.js'

const props = defineProps(['materialsInfo'])

const emit = defineEmits(['del'])

const del = () => {
  emit('del', 0)
}

const playVideoFun = (item: object) => {
  emitter.emit('true')
  emitter.emit('url', props.materialsInfo[0].url)
}

onMounted(()=>{
  // console.log('props.materialsInfo - - -    ', props.materialsInfo)
})


</script>
<style lang="scss" scoped>
.phoneVideo {
  position: relative;
  width: 120px;
  height: 114px;
  display: flex;
  align-items: center;
  .video_image {
    width: 100%;
    height: 114px;
  }
  .video_play {
    width: 30px;
    height: 30px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .del{
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 16px;
    background-color: #fafafa;
    height: 24px;
    width: 24px;
    text-align: center;
    line-height: 28px;
    border-radius: 50%;
    color: #888;
    &:hover{
      cursor: pointer;
      color: #fff;
      background-color: #F96B02;
    }
  }
}
</style>
